<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>后台登录</title>
		<link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../static/admin/css/login.css" />
	</head>

	<body>
		<div class="m-login-bg">
			<div class="m-login">
				<h3>后台系统登录</h3>
				<div class="m-login-warp">
					<form class="layui-form">
						<div class="layui-form-item">
							<input type="text" name="username" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<input type="text" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<input type="text" id="verity" name="verity" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline">
								<img id="verifyImg" class="verifyImg" onclick="getCaptchaImage();" src="{{ base64_str }}" />
							</div>
						</div>
						<div class="layui-form-item m-login-btn">
							<div class="layui-inline">
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">取消</button>
							</div>
						</div>
					</form>
				</div>
				<p class="copyright">Copyright 2015-2016 by XIAODU</p>
			</div>
		</div>
		<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form(),
					layer = layui.layer;
				var $ = layui.jquery;


				//自定义验证规则
				form.verify({
					username: function(value) {
						if(value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					password: [/(.+){6,12}$/, '密码必须6到12位'],
					verity: [/(.+){6}$/, '验证码必须是6位'],
					
				});
				//监听提交
				form.on('submit(login)', function(data) {
					//layer.alert(JSON.stringify(data.field), {
					//	title: '最终的提交信息'
					//})
                    var verity = data.field.verity;
                    var verity1 = "{{ verifyCode }}";
                    if (verity != verity1){
                        layer.alert("验证码不正确，请重新输入！");
                        return false;
                    }
                    $.ajax({
                        url:'/tologin',
                        data:data.field,
                        type:'post',
                        dataType:'json',
                        success:function (response){
                            if (response.code == 200){
                                layer.alert(response.msg,{title:'提示信息'});
                                location.href = 'index';
                            }else{
                                layer.alert(response.msg,{title:'警告信息'});
                            }
                        },
                        error:function(XHR, textStatus, errorThrown){
                            layer.alert("系统异常，请联系管理员！",{title:'异常信息'});
                        }
                    });
					return false;
				});

			});
            function getCaptchaImage(){
                var $ = layui.jquery
                var layer = layui.layer
                $.ajax({
                    url:'/getCaptchaImage',
                    dataType: 'text',
                    type: 'get',
                    success:function (res){
                        $('#verifyImg').attr('src',res);
                    },
                    error:function (a,b,c){
                        layer.alert("获取验证码异常，请联系管理员！");
                    }
                });
            }
		</script>
	</body>

</html>